vue与elementUI进度条组件并控制进度条加载速度（文件下载为例） |
您所在的位置：网站首页 › loading 进度条 › vue与elementUI进度条组件并控制进度条加载速度（文件下载为例） |
|
vue与elementUI进度条组件并控制进度条加载速度（文件下载为例）
这里采用的“假进度条”，触发下载时先让他平稳加载，最后加载完成直接百分之百。 转载文章：vue中进度条写法_在vue中如何实现页面加载进度条组件_黄海柳的博客-CSDN博客 感谢原作者，非常详细！！！！！！！！！！！ 采用progress进度条组件，详见elementUI官网 完整代码如下： 点击确定下载按钮，会显示进度条，并且每隔500ms加载5%。 导出进度： 确定下载progress属性解释：（status未写，使用默认值） 参数说明类型可选值默认值percentage百分比（必填）number0-1000status进度条当前状态stringsuccess/exception/warningprimarystroke-width进度条的宽度，单位 pxnumber—6text-inside进度条显示文字内置在进度条内（只在 type=line 时可用）boolean—false data(){ return{ progressFlag:flase,//进度条是否显示，初始隐藏 progressPercent:0//进度条进度显示的初始值 } }, props: { //自增幅度 step: { type: Number, default: 5, }, //初始值 initVal: { type: Number, default: 0, }, //到一定进度停止 stopVal: { type: Number, default: 90, }, //进度条继续到成功 isOk: { type: Boolean, default: false, }, }, watch: { //监听组件props变化决定是否继续加载 isOk() { let progressPercent = this.progressPercent let step = this.step let timer = setInterval(() => { progressPercent = progressPercent + step // 加载到百分百完成 if (progressPercent >= 100) { // 关闭定时器 clearInterval(timer) // 加载完成关闭进度条 this.progressFlag = false return } }, 500) }, }, methods:{ downLoad(){ //显示进度条 this.progressFlag = true // 初始化后加载进度，加载到百分之多少由stopVal决定 this.progressPercent = this.initVal let step = this.step //每500ms执行一次函数（进度条加step=5%） let timer = setInterval(() => { this.progressPercent = this.progressPercent + step // 父组件数据加载完前进度条最多到stopVal的这个百分值 if (this.progressPercent >= this.stopVal) { //停止执行 clearInterval(timer) return } }, 500) //下面就调用接口，调用完成就this.progressPercent=100 //这部分我写完会更新 }, }解释： setInterval() 函数会每间隔一段时间（直接设置这个时间，如上：500ms）执行一次函数，使用 clearInterval() 来停止执行。 clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。 clearInterval() 方法的参数timer： 调用 setInterval() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |